<template>
	<view class="lookDetails">
		<!-- <navCom navName="查看详情" @previous="previous"></navCom> -->
		<view class="ld-record-tabs" @click="changetabs">
			<view :class="changeTab=='qualifying'?'active':''" class="transfer" data-name="qualifying">我的排位</view>
			<view :class="changeTab=='amount'?'active':''" class="reception" data-name="amount">我的交易</view>
		</view>
		<view class="lookDetails_box" v-show="changeTab==='qualifying'">
			<view class="lookDetails_th my-pdlr-10">
				<view class="tlt">创建时间</view>
				<view class="tlt">当前状态</view>
				<view class="tlt">抽奖号</view>
			</view>
			<view class="" v-if="dev.length > 0">
				<view class="lookDetails_td my-pdlr-10" v-for="(item,index) in dev" :key="index">
					<view class="tlt">{{item.createDate.slice(0,10)}}</view>
					<view class="tlt">{{item.positionStatus}}</view>
					<view class="tlt">{{item.id}}</view>
				</view>
			</view>
			<view style="width: 100%;line-height: 400rpx;text-align: center;" v-else>暂无数据</view>
			
		</view>
		<view class="lookDetails_box" v-show="changeTab==='amount'">
			<view class="lookDetails_th my-pdlr-10">
				<view class="tlt">时间</view>
				<view class="tlt">交易单号</view>
				<view class="tlt">交易金额</view>
				<view class="tlt">待合并</view>
			</view>
			
			<view class="" v-if="dev.length > 0">
				<view class="lookDetails_td my-pdlr-10" v-for="(item,index) in dev" :key="index" v-show="dev.length > 0">
					<view class="tlt">{{item.createDate.slice(0,10)}}</view>
					<view class="tlt">{{item.tranRefCode}}</view>
					<view class="tlt">{{item.transAmount}}</view>
					<view class="tlt" v-if="index===0">{{item.positionNotAmount|| 0}}</view>
					<view class="tlt" v-else>---</view>
				</view>
			</view>
			<view style="width: 100%;line-height: 400rpx;text-align: center;" v-else>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import navCom from "@/components/navCom/navCom.vue";
	import {
		amountApi,
		qualifyingApi
	} from "@/api/home.js"
	export default {
		components: {
			navCom,
		},
		data() {
			return {
				changeTab: 'qualifying', //排位：qualifying  交易：amount
				pageIndex: 0, //页数
				pageSize: 30, //条数
				dev: [],
				total: 1,
			};
		},
		onLoad() {
			this.getdetails()
		},
		// 上拉加载更多
		onReachBottom() {
			this.getdetails()
		},
		methods: {
			changetabs(e) {
				this.changeTab = e.target.dataset.name
				if (this.changeTab === 'qualifying') {
					this.resetData()
				} else if (this.changeTab === 'amount') {
					this.resetData()
				}
			},
			resetData() {
				this.pageIndex = 0,
				this.pageSize = 30,
				this.total = 1,
				this.dev = [],
				this.getdetails()
			},
			async getdetails() {
				if (this.dev.length >= this.total) {
					uni.showToast({
						title:"无更多数据了",
						icon:"none"
					})
					return
				}
				let params = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				}
				uni.showLoading({
					title: "正在加载中...."
				})
				if (this.changeTab === 'amount') {
					var res = await amountApi(params)
				} else {
					var res = await qualifyingApi(params)
				}
				if (res.statusCode === 200) {
					uni.hideLoading()
					this.dev = res.data.data === null ? [] : [...this.dev, ...res.data.data.rows]
					this.total = res.data.data.total
					this.pageIndex++
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lookDetails {
		width: 100%;
		height: 100vh;
		background: #FAFAFA;

		.ld-record-tabs {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.transfer,
			.reception {
				width: 200rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				font-size: 30rpx;
				font-weight: bold;
			}

			.reception,
			.transfer {
				background: #FAFAFA;
				border: 1rpx solid #f4f4f4;
				font-size: 30rpx;
				font-weight: 500;
				color: #999999;
			}

			.transfer {
				border-radius: 35rpx 0rpx 0rpx 35rpx;
			}

			.reception {
				border-radius: 0rpx 35rpx 35rpx 0rpx;
			}

			.active {
				background: #FFFFFF;
				font-weight: bold;
				color: #000000;
			}
		}

		.lookDetails_box {
			width: 100%;
			height: auto;
			min-height: 1005rpx;
			background: #FFFFFF;

			.lookDetails_th {
				width: 100%;
				height: 80rpx;
				border-bottom: 1rpx solid #f3f3f3;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;

				.tlt {
					width: 33.3%;
					height: 100%;
					text-align: center;
					line-height: 80rpx;
				}
			}

			.lookDetails_td {
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #f7f7f7;
				font-size: 26rpx;
				font-weight: 400;
				color: #8f8f8f;

				.tlt {
					width: 33.3%;
					height: 100%;
					text-align: center;
					line-height: 80rpx;
				}
			}
		}
	}
</style>
